<template>
  <div id="app">
    <el-button style="margin-left: 16px" type="primary" @click="drawer = true">
      点我打开
    </el-button>
    <el-drawer
      :direction="direction"
      size="50%"
      title="我是父组件"
      :visible.sync="drawer"
    >
      <el-button style="margin-left: 16px" type="primary" @click="handleCreate">
        创建
      </el-button>
      <el-button style="margin-left: 16px" type="primary" @click="handleEdite">
        编辑
      </el-button>
      <Drawer :innwer="innwer" @update:innwer="handleInnwerUpdate"></Drawer>
    </el-drawer>
  </div>
</template>

<script>
import Drawer from './components/DrawePage'
export default {
  name: 'App',
  components: {
    Drawer
  },
  data() {
    return {
      drawer: false,
      innwer: false,
      direction: 'rtl'
    }
  },
  methods: {
    handleCreate() {
      this.innwer = true
    },
    handleEdite() {
      this.innwer = true
    },
    handleInnwerUpdate(value) {
      this.innwer = value // 监听子组件触发的自定义事件，并修改 innwer 的值
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
